import React from 'react';
import { graphql, Link } from 'gatsby';
import Header from '../components/Header';
import Seo from '../components/SEO';

export default function List({ data }) {
  console.log('node list props.data :', data);
  return (
    <>
      <Seo title="文章列表" />
      <Header />
      <ul>
        {data.allMarkdownRemark.nodes.map((node) => (
          <Link to={`/article/${node.fields.slug}`} key={node.fields.slug}>
            <h2>
              {node.frontmatter.title} —— {node.frontmatter.date}
            </h2>
          </Link>
        ))}
      </ul>
    </>
  );
}

export const query = graphql`
  query {
    allMarkdownRemark {
      nodes {
        frontmatter {
          title
          date
        }
        internal {
          type
        }
        fields {
          slug
        }
      }
    }
  }
`;
